<template>
  <div class="template-builder">
    <el-row>
      <el-col :span="6">
        <div class="sidebar">
          <div
            class="draggable-element"
            v-for="element in elements"
            :key="element.type"
            @dragstart="onDragStart(element)"
            draggable="true"
          >
            {{ element.label }}
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div
          class="drop-area"
          @dragover.prevent
          @drop="onDrop"
        >
          <div
            v-for="(field, index) in formFields"
            :key="index"
            class="form-field"
            :style="{ top: field.top + 'px', left: field.left + 'px', position: 'absolute' }"
          >
            <component :is="field.type" v-bind="field.props" />
            <el-button @click="removeField(index)">删除</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="primary" @click="saveTemplate">保存模板</el-button>
        <el-button type="primary" @click="loadTemplate">加载模板</el-button>
        <el-button type="primary" @click="generatePreview">生成预览</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div v-html="generatedPreview"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import 'element-plus/dist/index.css';

const elements = [
  { type: 'el-input', label: '输入框', props: { placeholder: '请输入内容' } },
  { type: 'el-select', label: '选择框', props: { placeholder: '请选择' } },
  { type: 'el-date-picker', label: '日期选择器', props: { placeholder: '请选择日期' } }
];

const formFields = reactive([]);
const generatedPreview = ref('');

const onDragStart = (element) => {
  event.dataTransfer.setData('element', JSON.stringify(element));
};

const onDrop = (event) => {
  const element = JSON.parse(event.dataTransfer.getData('element'));
  const offset = event.target.getBoundingClientRect();
  const top = event.clientY - offset.top;
  const left = event.clientX - offset.left;
  formFields.push({ type: element.type, props: { ...element.props }, top, left });
};

const removeField = (index) => {
  formFields.splice(index, 1);
};

const saveTemplate = async () => {
  try {
    await axios.post('/api/templates', { template: formFields });
    alert('模板已保存');
  } catch (error) {
    console.error('保存模板失败:', error);
  }
};

const loadTemplate = async () => {
  try {
    const response = await axios.get('/api/templates/latest');
    formFields.splice(0, formFields.length, ...response.data.template);
  } catch (error) {
    console.error('加载模板失败:', error);
  }
};

const generatePreview = async () => {
  try {
    const response = await axios.post('/api/templates/preview', { template: formFields });
    generatedPreview.value = response.data.preview;
  } catch (error) {
    console.error('生成预览失败:', error);
  }
};

onMounted(() => {
  loadTemplate();
});
</script>

<style scoped>
.template-builder {
  padding: 20px;
}

.sidebar {
  padding: 10px;
  border-right: 1px solid #ddd;
}

.draggable-element {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.drop-area {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  position: relative;
}

.form-field {
  margin-bottom: 20px;
}
</style>
